<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>分类图库</title>
    <link rel="stylesheet" href="plugin/awesome4/css/font-awesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="plugin/waterfall/style2.css" />
    <script src="plugin/jquery-1.11.2.min.js"></script>
    <script src="plugin/bootstrap.min.js"></script>
    <script src="plugin/waterfall/js/modernizr-custom.js"></script>
    <link rel="stylesheet" href="plugin/bootstrap.min.css"/>
    <link rel="stylesheet" href="style/common.css"/>
    <link rel="stylesheet" href="style/gallery.css"/>
</head>
<body class="demo-2">

<header>
    <nav class="navbar navbar-default navbar-static-top">
        <div class="container">
            <div class="navbar-header pull-left">
                <!-- Logo -->
                <a class="navbar-brand" href="/">POSTCARD</a>
            </div>
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!-- Navmenu -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="index.php">主页</a></li>
                    <li><a href="javascript:;">图库</a></li>
                    <li><a href="javascript:;">制作明信片</a></li>
                    <li><a href="javascript:;" data-toggle="modal" data-target="#login_modal">注册/登录</a></li>
                    <li><a href="user.html">个人中心</a></li>
                </ul>
            </div>
        </div>
    </nav>
</header>

<div class="container card-container">
    <div class="col col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="tab-content card-tab-content">
            <div role="tabpanel" class="tab-pane active" id="messages">
                <div class="tools">
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#categery_0" role="tab" data-toggle="tab">热门</a></li>
                        <?php foreach($cardLabels as $clabels) { ?>
                        <li role="presentation"><a href="#categery_<?=$clabels['id']?>" role="tab" data-toggle="tab"><?=$clabels['label_name']?></a></li>
                        <?php } ?>
                    </ul>

                    <!-- Tab panes -->
                    <div class="tab-content tools-tab">
                        <div role="tabpanel" class="tab-pane active" id="categery_0">
                            <div class="content">
                                <div class="grid">
                                    <?php foreach($cardAll as $cards) { ?>
                                    <div class="grid__item" data-size="1280x857">
                                        <a href="card_img/<?=$cards['id']?>.jpg" class="img-wrap"><img src="card_img/<?=$cards['id']?>.jpg" alt="img06" />
                                            <div class="description description--grid">
                                                <h3><?=$cards['title']?></h3>
                                                <p><?=$cards['note']?><em>&mdash; 小胖</em></p>
                                            </div>
                                        </a>
                                    </div>
                                    <?php } ?>
                                </div>
                                <!-- /grid -->
                                <div class="preview">
                                    <button class="action action--close"><i class="fa fa-times"></i><span class="text-hidden">Close</span></button>
                                    <div class="description description--preview"></div>
                                </div>
                                <!-- /preview -->
                            </div>
                        </div>
                        <?php foreach($cardLabels as $clabels) { ?>
                        <div role="tabpanel" class="tab-pane" id="categery_<?=$clabels['id']?>">
                            <div class="content">
                                <div class="grid">
                                    <?php foreach($cardAll as $cards) { ?>
                                        <div class="grid__item" data-size="1280x857">
                                            <a href="card_img/<?=$cards['id']?>.jpg" class="img-wrap"><img src="card_img/<?=$cards['id']?>.jpg" alt="img06" />
                                                <div class="description description--grid">
                                                    <h3><?=$cards['title']?></h3>
                                                    <p><?=$cards['note']?><em>&mdash; 小胖</em></p>
                                                </div>
                                            </a>
                                        </div>
                                    <?php } ?>
                                </div>
                                <!-- /grid -->
                                <div class="preview">
                                    <button class="action action--close"><i class="fa fa-times"></i><span class="text-hidden">Close</span></button>
                                    <div class="description description--preview"></div>
                                </div>
                                <!-- /preview -->
                            </div>
                        </div>
                        <?php } ?>
                    </div>
                </div>

            </div>
            <div role="tabpanel" class="tab-pane" id="home">

            </div>
            <div role="tabpanel" class="tab-pane img-collection" id="profile">

            </div>

            <div role="tabpanel" class="tab-pane" id="settings">

            </div>
        </div>
    </div>
</div>
<div class="footer">
    <p class="copyright text-center">
        版权所有：xpwh工作室  2016-2017 , All Rights Reserved.
        京ICP备060018号 京公网安备110112000309号
    </p>
</div>

<script src="plugin/waterfall/js/imagesloaded.pkgd.min.js"></script>
<script src="plugin/waterfall/js/masonry.pkgd.min.js"></script>
<script src="plugin/waterfall/js/classie.js"></script>
<script src="plugin/waterfall/js/main.js"></script>
<script>
    (function() {
        var support = { transitions: Modernizr.csstransitions },
        // transition end event name
            transEndEventNames = { 'WebkitTransition': 'webkitTransitionEnd', 'MozTransition': 'transitionend', 'OTransition': 'oTransitionEnd', 'msTransition': 'MSTransitionEnd', 'transition': 'transitionend' },
            transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
            onEndTransition = function( el, callback ) {
                var onEndCallbackFn = function( ev ) {
                    if( support.transitions ) {
                        if( ev.target != this ) return;
                        this.removeEventListener( transEndEventName, onEndCallbackFn );
                    }
                    if( callback && typeof callback === 'function' ) { callback.call(this); }
                };
                if( support.transitions ) {
                    el.addEventListener( transEndEventName, onEndCallbackFn );
                }
                else {
                    onEndCallbackFn();
                }
            };

        new GridFx(document.querySelector('.grid'), {
            imgPosition : {
                x : -0.5,
                y : 1
            },
            onOpenItem : function(instance, item) {
                instance.items.forEach(function(el) {
                    if(item != el) {
                        var delay = Math.floor(Math.random() * 50);
                        el.style.WebkitTransition = 'opacity .5s ' + delay + 'ms cubic-bezier(.7,0,.3,1), -webkit-transform .5s ' + delay + 'ms cubic-bezier(.7,0,.3,1)';
                        el.style.transition = 'opacity .5s ' + delay + 'ms cubic-bezier(.7,0,.3,1), transform .5s ' + delay + 'ms cubic-bezier(.7,0,.3,1)';
                        el.style.WebkitTransform = 'scale3d(0.1,0.1,1)';
                        el.style.transform = 'scale3d(0.1,0.1,1)';
                        el.style.opacity = 0;
                    }
                });
            },
            onCloseItem : function(instance, item) {
                instance.items.forEach(function(el) {
                    if(item != el) {
                        el.style.WebkitTransition = 'opacity .4s, -webkit-transform .4s';
                        el.style.transition = 'opacity .4s, transform .4s';
                        el.style.WebkitTransform = 'scale3d(1,1,1)';
                        el.style.transform = 'scale3d(1,1,1)';
                        el.style.opacity = 1;

                        onEndTransition(el, function() {
                            el.style.transition = 'none';
                            el.style.WebkitTransform = 'none';
                        });
                    }
                });
            }
        });
    })();
</script>
</body>
</html>